(function(window){
    var pageToNum = {
	cover: 0,
	basic: 1,
	fave: 2,
	skills: 3,
	contact: 4
    };

    var $basic_btn = $('.basic-btn');
    var $fave_btn = $('.fave-btn');
    var $skills_btn = $('.skills-btn');
    var $contact_btn = $('.contact-btn');
    var $btns = $('.item');
    var $pages = $('.head-frame .container .pages');

    var $go_btn = $('.go-btn');
    var $top_nav = $('.top-nav');
    var $items = $('.items');

    function getOffset(page){
	if(typeof page.length !== 'undefined') // page is num
	    page = pageToNum[page];
	if(typeof page === 'undefined')
	    throw new Error('page not found');

	return -(page * 960 + 80);
    }

    $go_btn.click(function(){
	$top_nav.css('opacity', 1);
	$items.css('width', '600px');
	toBasic();
    });

    function toBasic(){
	$btns.removeClass('active');
	$basic_btn.addClass('active');
	$pages.css('left', getOffset('basic'));
    }

    $basic_btn.click(toBasic);

    $fave_btn.click(function(){
	$btns.removeClass('active');
	$fave_btn.addClass('active');
	$pages.css('left', getOffset('fave'));
    })
    $skills_btn.click(function(){
	$btns.removeClass('active');
	$skills_btn.addClass('active');
	$pages.css('left', getOffset('skills'));
    })
    $contact_btn.click(function(){
	$btns.removeClass('active');
	$contact_btn.addClass('active');
	$pages.css('left', getOffset('contact'));
    })

})(this);
